<template>
  <ul>
    <li v-for="item in data" :key="item.text" @click.stop="handleClick(item)">
      {{item.text}}
      <Tree2 :data="item.children" v-if="item.expend && item.children && item.children.length>0"/>
    </li>
  </ul>
</template>

<script> 
/* 一个组件内部有自己的组件标签 */
export default {  // 
  name: 'Tree2',
  props: ['data'],
  data () {
    return {
      // expend: false
    }
  },
  methods: {
    handleClick (item) {
      console.log('handleClick()')
      // item.expend = !item.expend // 第一次是给响应式对象添加新属性

      if (item.hasOwnProperty('expend')) {
        item.expend = !item.expend
      } else {
        this.$set(item, 'expend', true)
      }
    }
  }
}
</script>